<template>
  <div>
    <div v-if="showLoading">
      <p class="login-title">登录</p>
      <van-row>
        <van-col span="24">
          <van-cell-group>
            <van-field
              v-model="username"
              label="用户名"
              placeholder="请输入用户名/手机号"
              left-icon="contact"
            >
              <van-icon v-show="username" @click="username = ''" slot="button" name="close" />
            </van-field>
          </van-cell-group>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <van-cell-group>
            <van-field
              v-model="password"
              label="密码"
              type="password"
              placeholder="请输入密码"
              left-icon="home-o"
            >
              <van-icon v-show="password" @click="password = ''" slot="button" name="close" />
            </van-field>
          </van-cell-group>
        </van-col>
      </van-row>
      <van-button class="login-btn" @click="handleSubmit" round size="large">登录</van-button>
      <p class="the-user">
        <router-link class="the-user-to" to='/login/login-sms'>短信验证登录</router-link>
        <router-link class="the-user-to" to='/index'>游客模式</router-link>
      </p>
      <p class="the-registered">
        <router-link class="the-registered-to" to='/login/registered-init'>还没账号？点此注册</router-link>
      </p>
    </div>
    <div v-else class="loading-body" ref="loadingBody">
      <van-loading type="spinner" size="50px" color="#c9c9c9" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
        clientHeight: '',
        showLoading: false
      }
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}`
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`
      }
      this.wechatUserInfo()
    },
    methods: {
      changeFixed(clientHeight) {
        this.$refs.loadingBody.style.height = clientHeight + 'px'
      },
      // 获取openID
      wechatUserInfo() {
        let obj = this.$objectUtil.GetRequest()
        this.$get('/api/wechat/userInfo', {code: obj.code}).then((res) => {
          if (res.code === 0) {
            localStorage.setItem('openId', res.data.openId)
            this.userInfo(res.data.accessToken, res.data.openId)
          }
        })
      },
      // 获取用户头像
      userInfo(accessToken, openId) {
        this.$get('/api/wechat/getUserInfo', {accessToken: accessToken, openId: openId}).then((res) => {
          if (res.code === 0) {
            localStorage.setItem('headimgurl', res.data.headimgurl)
            localStorage.setItem('nickname', res.data.nickname)
            if (localStorage.getItem('x-token')) {
              this.$router.push('/index')
            } else {
              this.showLoading = true
            }
          }
        })
      },
      // 登录
      handleSubmit () {
        if (!this.username) {
          this.$toast('手机号不能为空')
          return false
        } else if (!this.$objectUtil.checkPhone(this.username)) {
          this.$toast('手机号格式错误')
          return false
        } else if (!this.password) {
          this.$toast('密码不能为空')
          return false
        }
        let url = '/api/sys/staff/login'
        let form = this.$qs.stringify({
          loginName: this.username,
          password: this.password
        })
        this.$post(url, form).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast('登录名或密码错误')
              return false
            }
            localStorage.setItem('x-token', res.data.token)
            if (this.$route.query.redirect) {
              this.$router.push(this.$route.query.redirect)
            } else {
              this.$router.push({path: '/index'})
            }
          } else {
            this.$toast('用户名或密码错误')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .login-title{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin: 80px 0;
  }
  .login-btn{
    width: 84%;
    background: #36aaf5;
    color: #fff;
    margin: 40px 8%;
  }
  .the-user-to{
    padding: 0px 40px;
    color: #000000;
  }
  .the-user{
    font-size: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .the-registered{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin-top: 200px;
  }
  .the-registered-to{
    font-size: 24px;
    color: #000000;
    text-decoration:underline;
  }
  .loading-body{
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>
